<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
	/* 大的table */
	table{margin: 10px auto; width: 80%; border: 1px solid #69c;border-collapse: collapse ;
	}
	/* td table 是后面的样式 */
	table tr td,table tr th{height: 30px;border: 1px solid #69c;text-align: center;font-size: 12px;
	}
.yellow{background:yellow ;}
</style>
<div id="app">
	<table>
		<tr>
			<th v-bind:class="{yellow:choose}"@click="change()">序号</th>
			<th>图书名称</th>
			<th>价格</th>
		</tr>
		
		<tr>
			<td v-bind:class="{yellow:choose}"@click="change()">1</td>
			<td>水浒传</td>
			<td>40</td>
		</tr>
		<tr>
			<td v-bind:class="{yellow:choose}"@click="change()">2</td>
			<td>西游记</td>
			<td>40</td>
		</tr>
		<tr>
			<td>3</td>
			<td>红楼梦</td>
			<td>40</td>
		</tr>
		<tr>
			<td>4</td>
			<td>三国演义</td>
			<td>40</td>
		</tr>
	</table>
	
</div>

</head>
<body>
	<script>
		new Vue({
			el:"#app",
			data:{
				choose:true
			},
			methods:{
				change:function(){
					this.choose=!this.choose
				}
			}
		})
	</script>
</body>
</html>
